<template>
	<view class="navigation-detail-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-left">
				<uni-icons type="left" size="20" @click="goBack"></uni-icons>
			</view>
			<view class="navbar-title">导航详情</view>
			<view class="navbar-right">
				<uni-icons type="more-filled" size="20" @click="showMoreOptions"></uni-icons>
			</view>
		</view>
		
		<!-- 目标位置信息 -->
		<view class="target-location">
			<view class="location-header">
				<uni-icons type="location-filled" size="20" color="#007AFF"></uni-icons>
				<text class="location-title">目标位置</text>
			</view>
			<view class="location-details">
				<view class="location-name">{{ targetLocation.name }}</view>
				<view class="location-address">{{ targetLocation.address }}</view>
				<view class="location-distance">距离：{{ targetLocation.distance }}</view>
			</view>
		</view>
		
		<!-- 导航选项 -->
		<view class="navigation-options">
			<view class="option-item" @click="startNavigation('driving')">
				<view class="option-icon">
					<uni-icons type="car" size="20" color="#007AFF"></uni-icons>
				</view>
				<view class="option-info">
					<view class="option-name">驾车导航</view>
					<view class="option-desc">预计{{ targetLocation.drivingTime }}到达</view>
				</view>
				<uni-icons type="right" size="16" color="#ccc"></uni-icons>
			</view>
			
			<view class="option-item" @click="startNavigation('walking')">
				<view class="option-icon">
					<uni-icons type="person" size="20" color="#28a745"></uni-icons>
				</view>
				<view class="option-info">
					<view class="option-name">步行导航</view>
					<view class="option-desc">预计{{ targetLocation.walkingTime }}到达</view>
				</view>
				<uni-icons type="right" size="16" color="#ccc"></uni-icons>
			</view>
			
			<view class="option-item" @click="startNavigation('transit')">
				<view class="option-icon">
					<uni-icons type="bus" size="20" color="#ffc107"></uni-icons>
				</view>
				<view class="option-info">
					<view class="option-name">公交导航</view>
					<view class="option-desc">预计{{ targetLocation.transitTime }}到达</view>
				</view>
				<uni-icons type="right" size="16" color="#ccc"></uni-icons>
			</view>
		</view>
		
		<!-- 位置详情 -->
		<view class="location-detail">
			<view class="detail-section">
				<view class="section-title">位置详情</view>
				<view class="detail-item">
					<text class="detail-label">营业时间：</text>
					<text class="detail-value">{{ targetLocation.openTime }}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">联系电话：</text>
					<text class="detail-value" @click="callPhone">{{ targetLocation.phone }}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">服务项目：</text>
					<text class="detail-value">{{ targetLocation.services.join('、') }}</text>
				</view>
			</view>
		</view>
		
		<!-- 附近推荐 -->
		<view class="nearby-recommendations">
			<view class="section-title">附近推荐</view>
			<view class="recommendation-list">
				<view 
					class="recommendation-item" 
					v-for="(item, index) in nearbyPlaces" 
					:key="index"
					@click="selectNearbyPlace(item)"
				>
					<view class="recommendation-icon">
						<image :src="item.image" mode="aspectFill" class="place-img"></image>
					</view>
					<view class="recommendation-info">
						<view class="recommendation-name">{{ item.name }}</view>
						<view class="recommendation-address">{{ item.address }}</view>
						<view class="recommendation-distance">{{ item.distance }}</view>
					</view>
					<uni-icons type="right" size="16" color="#ccc"></uni-icons>
				</view>
			</view>
		</view>
		
		<!-- 底部操作按钮 -->
		<view class="bottom-actions">
			<view class="action-btn primary" @click="startNavigation('driving')">
				<uni-icons type="car" size="16" color="#ffffff"></uni-icons>
				<text>开始导航</text>
			</view>
			<view class="action-btn secondary" @click="shareLocation">
				<uni-icons type="share" size="16" color="#007AFF"></uni-icons>
				<text>分享位置</text>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
	
	export default {
		components: { 
			uniIcons
		},
		data() {
			return {
				targetLocation: {
					name: '中国石油加油站',
					address: '山阳区人民中路32号',
					distance: '44m',
					drivingTime: '2分钟',
					walkingTime: '5分钟',
					transitTime: '8分钟',
					openTime: '24小时营业',
					phone: '0391-12345678',
					services: ['加油', '洗车', '便利店'],
					latitude: 35.123456,
					longitude: 113.123456
				},
				nearbyPlaces: [
					{
						name: '中国石化加油站',
						address: '解放区建设路128号',
						distance: '120m',
						image: '/static/c2.png'
					},
					{
						name: '汽车维修中心',
						address: '中站区跃进路56号',
						distance: '280m',
						image: '/static/c3.png'
					},
					{
						name: '专业洗车店',
						address: '马村区文昌路89号',
						distance: '450m',
						image: '/static/c4.png'
					}
				]
			};
		},
		onLoad(options) {
			// 可以从options中获取传递的参数
			if (options.locationId) {
				this.loadLocationDetail(options.locationId);
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 显示更多选项
			showMoreOptions() {
				uni.showActionSheet({
					itemList: ['收藏', '举报', '分享'],
					success: (res) => {
						console.log('选择了:', res.tapIndex);
					}
				});
			},
			
			// 加载位置详情
			loadLocationDetail(locationId) {
				// 这里可以根据locationId加载具体的位置信息
				console.log('加载位置详情:', locationId);
			},
			
			// 开始导航
			startNavigation(type) {
				const typeMap = {
					driving: '驾车',
					walking: '步行',
					transit: '公交'
				};
				
				uni.showModal({
					title: '确认导航',
					content: `是否开始${typeMap[type]}导航到${this.targetLocation.name}？`,
					success: (res) => {
						if (res.confirm) {
							// 调用系统地图导航
							uni.openLocation({
								latitude: this.targetLocation.latitude,
								longitude: this.targetLocation.longitude,
								name: this.targetLocation.name,
								address: this.targetLocation.address,
								success: () => {
									console.log('导航成功');
								},
								fail: (err) => {
									console.error('导航失败:', err);
									uni.showToast({
										title: '导航失败',
										icon: 'none'
									});
								}
							});
						}
					}
				});
			},
			
			// 拨打电话
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.targetLocation.phone,
					success: () => {
						console.log('拨打电话成功');
					},
					fail: (err) => {
						console.error('拨打电话失败:', err);
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						});
					}
				});
			},
			
			// 选择附近地点
			selectNearbyPlace(place) {
				uni.showToast({
					title: `选择了${place.name}`,
					icon: 'none'
				});
			},
			
			// 分享位置
			shareLocation() {
				uni.showToast({
					title: '分享功能开发中',
					icon: 'none'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navigation-detail-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 80px;
	}
	
	// 自定义导航栏
	.custom-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 44px 16px 12px 16px;
		background-color: #ffffff;
		border-bottom: 1px solid #f0f0f0;
		
		.navbar-left {
			width: 40px;
		}
		
		.navbar-title {
			font-size: 18px;
			font-weight: bold;
			color: #333333;
		}
		
		.navbar-right {
			width: 40px;
			display: flex;
			justify-content: flex-end;
		}
	}
	
	// 目标位置信息
	.target-location {
		background-color: #ffffff;
		margin-bottom: 12px;
		padding: 16px;
		
		.location-header {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 12px;
			
			.location-title {
				font-size: 16px;
				font-weight: bold;
				color: #333333;
			}
		}
		
		.location-details {
			.location-name {
				font-size: 18px;
				font-weight: bold;
				color: #333333;
				margin-bottom: 8px;
			}
			
			.location-address {
				font-size: 14px;
				color: #666666;
				margin-bottom: 4px;
			}
			
			.location-distance {
				font-size: 12px;
				color: #007AFF;
			}
		}
	}
	
	// 导航选项
	.navigation-options {
		background-color: #ffffff;
		margin-bottom: 12px;
		
		.option-item {
			display: flex;
			align-items: center;
			padding: 16px;
			border-bottom: 1px solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.option-icon {
				width: 40px;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #f0f8ff;
				border-radius: 50%;
				margin-right: 12px;
			}
			
			.option-info {
				flex: 1;
				
				.option-name {
					font-size: 16px;
					font-weight: bold;
					color: #333333;
					margin-bottom: 4px;
				}
				
				.option-desc {
					font-size: 12px;
					color: #999999;
				}
			}
		}
	}
	
	// 位置详情
	.location-detail {
		background-color: #ffffff;
		margin-bottom: 12px;
		
		.detail-section {
			padding: 16px;
			
			.section-title {
				font-size: 16px;
				font-weight: bold;
				color: #333333;
				margin-bottom: 12px;
			}
			
			.detail-item {
				display: flex;
				margin-bottom: 8px;
				
				.detail-label {
					font-size: 14px;
					color: #666666;
					width: 80px;
					flex-shrink: 0;
				}
				
				.detail-value {
					font-size: 14px;
					color: #333333;
					flex: 1;
				}
			}
		}
	}
	
	// 附近推荐
	.nearby-recommendations {
		background-color: #ffffff;
		
		.section-title {
			padding: 16px 16px 8px 16px;
			font-size: 16px;
			font-weight: bold;
			color: #333333;
		}
		
		.recommendation-list {
			.recommendation-item {
				display: flex;
				align-items: center;
				padding: 12px 16px;
				border-bottom: 1px solid #f0f0f0;
				
				&:last-child {
					border-bottom: none;
				}
				
				.recommendation-icon {
					width: 40px;
					height: 40px;
					margin-right: 12px;
					
					.place-img {
						width: 100%;
						height: 100%;
						border-radius: 8px;
					}
				}
				
				.recommendation-info {
					flex: 1;
					
					.recommendation-name {
						font-size: 14px;
						color: #333333;
						margin-bottom: 4px;
					}
					
					.recommendation-address {
						font-size: 12px;
						color: #666666;
						margin-bottom: 2px;
					}
					
					.recommendation-distance {
						font-size: 12px;
						color: #007AFF;
					}
				}
			}
		}
	}
	
	// 底部操作按钮
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 16px;
		background-color: #ffffff;
		border-top: 1px solid #f0f0f0;
		gap: 12px;
		
		.action-btn {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			padding: 12px;
			border-radius: 8px;
			font-size: 16px;
			font-weight: bold;
			
			&.primary {
				background-color: #007AFF;
				color: #ffffff;
			}
			
			&.secondary {
				background-color: #f0f8ff;
				color: #007AFF;
				border: 1px solid #007AFF;
			}
		}
	}
</style> 